<template >
  <div>
    <h2>预约管理</h2>

    <div class="box">
      <div class="operating">
        <el-button type="info" size="small" @click="goBack" icon="el-icon-arrow-left">返回</el-button>
        <el-button type="success" size="small" @click="addPatient">+新增患者</el-button>
      </div>
      <div class="operating">
        <el-input placeholder="查找..." class="search-input" v-model="searchInput" >
          <el-button slot="append" icon="el-icon-search" @click="search(searchInput)"></el-button>
        </el-input>
      </div>
    </div>



    <!-- 表格 -->
    <el-table :data="currentList" style="width: 100%" v-if="isShow">
      <el-table-column prop="type" label="类型" min-width="8%">
      </el-table-column>
      <el-table-column prop="name" label="患者名称" min-width="8%">
      </el-table-column>
      <el-table-column prop="gender" label="性别" min-width="8%">
      </el-table-column>
      <el-table-column prop="age" label="年龄" min-width="8%">
      </el-table-column>
      <el-table-column prop="tel" label="手机号" width="150">
      </el-table-column>
      <el-table-column prop="IDNumber" label="身份证号" width="200">
      </el-table-column>
      <el-table-column prop="pic" label="负责人" min-width="8%">
      </el-table-column>
      <el-table-column prop="status" label="状态" min-width="8%">
        <template slot-scope="scope">
        <el-tag disable-transitions type="success" v-if="scope.row.status == '有效'">
          {{ scope.row.status }}
        </el-tag>
        <el-tag disable-transitions type="info" v-if="scope.row.status == '无效'">
          {{ scope.row.status }}
        </el-tag>
      </template>
      </el-table-column>  

        <el-table-column label="预约天数" min-width="8%">
          <template slot-scope="scope">
            <el-input v-model="daysInputList[scope.$index]"></el-input>  
          </template>
        </el-table-column>

      <el-table-column label="操作" fixed="right" width="200">
        <template slot-scope="scope">
          <el-button type="success" size="mini" @click="addAppointment(scope.$index)">
            +新增预约
          </el-button>
        </template>
      </el-table-column>
    </el-table>


   
      <!-- 分页 -->
      <div class="block">
        <Pagination :total="total" :pageSize="pagesize" @getPagination="getPagination"></Pagination>
      </div>



  </div>
</template>
<script>


import Pagination from '@/components/Pagination'
export default {
  
  name: '',
  components: {
    Pagination
  },
  mixins: [],
  props: {

  },
  data() {
    return {
      currentList:[],
      currentPage: 1,
      pagesize: 10,
      searchInput: "",
      daysInputList:[],
      isShow:false,
      total:0
    }
  },

  created(){
    this.render()
  },



  methods: {

    async render(){
      await this.$api.appointment.findPatientList({
       pageSize: this.pagesize,
       currentPage: this.currentPage
      }).then((res) => {
        this.total = res.data.data.total
        this.currentList = this.dataRewrite(res.data.data.list)
        console.log(res)
      })

      await this.$api.appointment.findUserById({
        id:sessionStorage.getItem('userID')
      }).then((res) => {
        for(let i = 0; i < this.currentList.length; i++){
          this.currentList[i].pic=res.data.data.realName
        }
      })
     
      this.isShow = true
    },



    goBack() {
      this.$router.push("/appointment/appManage")
    },
    addPatient() {
      this.$router.push("/patient/addPatient")
    },

    //模糊查询
    search(value) {
      if(value == ""){
        this.render()
      }else{
        this.$api.appointment.findPatientByName(
        this.searchInput,
        this.currentPage,
        this.pagesize
      ).then((res)=>{
        console.log(res)
        this.total = res.data.data.total
        this.currentList = this.dataRewrite(res.data.data.list)
      })
      }
    },



    //新增预约
    addAppointment(val){
      // console.log(this.daysInputList[val])
      this.$api.appointment.addAppointment(
       this.currentList[val].id,
       this.daysInputList[val]
      ).then((res) => {
        console.log(this.currentList[val].id)
        console.log(this.daysInputList[val])
        this.$router.push("/appointment/appManage")
        console.log(res)
      }
      )
    },

    async getPagination(page){
      this.currentPage = page
      await this.$api.appointment.findPatientList({
       pageSize: this.pagesize,
       currentPage: this.currentPage
      }).then((res) => {
        this.total = res.data.data.total
        this.currentList = this.dataRewrite(res.data.data.list)
        console.log(res)
      })
    },

    //数据处理
    dataRewrite(list){
      return list.map(item => ({
        id:item.id,
        type:item.type === 0? "公海" : "私海",
        name:item.name,
        age:item.age,
        gender:item.sex === 0? "男" : "女",
        tel:item.phone,
        IDNumber:item.idCard,
        status:item.status === 0? "有效" : "无效"
      }))
    }

  }
};
</script>
<style lang='less' scoped>
/* @import url("//unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css"); */


h2 {
  margin: 15px;
}

.box {
  background-color: white;
  margin: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 3px solid #ccc;
  border-radius: 5px;
}

.operating {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 10px;
}

.search-input {
  width: 200px;
  float: right;
}

.reserve-footer {
  display: flex;
  justify-content: space-between;
}
</style>